/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="formRef" class="config_form">
        <div class="config_form__dataspace">
            <sf-fieldlabel show-required :label-width="160" label-align="top">选择输出数据集</sf-fieldlabel>
            <div class="dataspace-form__group">
                <sf-radio-group v-model="formData.writeMode">
                    <sf-radio :box-label=" _('追加数据') " check-value="append"/>
                    <sf-radio :box-label=" _('覆盖原有数据') " check-value="overwrite"/>
                    <sf-fieldtip style="margin-right: 102px;">
                        <lang>覆盖模式会删除原有记录</lang>
                    </sf-fieldtip>
                </sf-radio-group>
            </div>
            <el-row class="dataspace-form__input">
                <el-col :span="12">
                    <el-select v-model="formData.outputDataspace" filterable :placeholder="_('请选择输出数据空间')">
                        <el-option
                            v-for="item in outputDataspace"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-form ref="elFormRef" :model="formData" :rules="rules">
                        <el-form-item style="margin-bottom: 0;" prop="outputDataset">
                            <el-autocomplete
                                v-model="formData.outputDataset"
                                class="inline-input"
                                :fetch-suggestions="datasetSearch"
                                :placeholder=" _('输出数据集') "
                            ></el-autocomplete>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <div class="config_form__taskrule">
            <sf-fieldlabel show-required :label-width="160" label-align="top">任务执行方式</sf-fieldlabel>
            <sf-radio-group v-model="formData.scheduleMode">
                <sf-radio :box-label=" _('一次性任务') " check-value="once"/>
                <sf-radio :box-label=" _('周期性任务') " :default-disabled="true" check-value="cron"/>
            </sf-radio-group>
        </div>
        <div class="config_form__tasktime">
            <sf-fieldlabel show-required :label-width="160" label-align="top">任务执行时间</sf-fieldlabel>
            <sf-radio-group v-model="formData.scheduleTime">
                <sf-radio :box-label=" _('立即执行') " check-value="0"/>
                <sf-radio :box-label=" _('预约执行') " :default-disabled="true" check-value="1"/>
            </sf-radio-group>
        </div>
        <div class="config_form__tips">
            <i class="sf-comp-iconfont icon-comp-win-tip"></i>
            <lang>单个ETL任务最长执行时间为6小时，超过6小时的任务系统将自动结束该任务</lang>
        </div>
    </sf-form>
</template>icon-comp-warn

<script>
export default {
    name: "ConfigForm",
    computed: {
        outputDataspace() { // 输出数据空间
            return Object.keys(this.inputTips).map(item => ({value: item}))
        },
        outputDataset() { // 输出数据集
            if (!this.outputDataspace.find(item => item.value === this.formData.outputDataspace)) {
                return []
            }
            return this.inputTips[this.formData.outputDataspace].map(item => ({value: item}))
        }
    },
    data() {
        return {
            rules: {
                outputDataset: [
                    {required: true, message: '请填写数据集', trigger: 'blur'},
                    {pattern: /^[a-z][a-z0-9_]*$/, message: '必须以小写字母开头，而且仅支持下划线、数字及小写字母', trigger: 'blur'}
                ],
            },
            inputTips: {},
            formData: {
                writeMode: this.$store.state.task.form.writeMode,
                scheduleMode: this.$store.state.task.form.scheduleMode,
                scheduleTime: this.$store.state.task.form.scheduleTime,
                outputDataspace: this.$store.state.task.form.outputDataspace,
                outputDataset: this.$store.state.task.form.outputDataset,
            }
        }
    },
    async mounted() {
        const {data, success, msg} = await this.$ajax.get('/task-manage/api/v1/writable/datasets')
        if (!success) {
            this.$warn(msg || '获取数据空间失败', {autoHide: true})
            return;
        }
        this.inputTips = data;
    },
    methods: {
        datasetSearch(search, cb) {
            const restaurants = this.outputDataset;
            const result = search ? restaurants.filter(this.createFilter(search)) : restaurants;
            cb(result)
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        
        async isValid() {
            let formValid = true
            this.$refs.elFormRef.validate((valid) => {
                formValid = valid
            })
            this.$closeNotifys();
            if (this.formData.outputDataspace === '' || !formValid) {
                this.$warn(_('请选择输出数据空间和输出数据集'), {autoHide: true})
                return false;
            }
            return true;
        },
        getJsonValue() {
            return this.formData;
        }
        
    }
}
</script>

<style scoped lang="less">
.config_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    &__dataspace {
        width: 55%;
        
        .dataspace-form__group {
            padding-left: 24px;
            
            .sfv-radio-group {
                display: flex;
                align-items: center;
                
                .sfv-radio + .sfv-radio {
                    margin-left: 143px;
                }
            }
        }
        
        .dataspace-form__input {
            padding-left: 24px;
            margin-top: 20px;
            
            .el-autocomplete, .el-select {
                width: 380px;
            }
        }
    }
    
    &__tasktime, &__taskrule {
        width: 55%;
        margin-top: 20px;
        
        .sfv-radio-group {
            padding-left: 24px;
            
            .sfv-radio {
                width: 90px;
            }
            
            .sfv-radio + .sfv-radio {
                margin-left: 128px;
            }
            
            .sfv-radio[disabled] {
                color: #ccc;
            }
        }
    }
    
    &__tips {
        width: 55%;
        display: flex;
        align-items: center;
        height: 54px;
        margin-top: 20px;
        background-color: #D4E3FC;
        
        .sf-comp-iconfont {
            margin-left: 25px;
            color: #0052D9;
            margin-right: 10px;
        }
        
        span {
            font-size: 14px;
            font-weight: normal;
        }
    }
    
    /deep/ .sfv-fieldlabel {
        font-size: 14px;
        font-weight: 500;
        color: #3D3D3D;
        
        .sfv-fieldlabel-content--required {
            padding-left: 10px;
        }
        
        .sfv-fieldlabel-content--required::before {
            top: 3px;
        }
    }
}
</style>
